<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="css/nav-bottom.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/creatbook.css">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
    <title>创建书籍</title>
</head>
<body>
<!-- 要将父布局的position设置为relative，父布局将无法包裹input -->
<div id="upload-box">
    <!--设置input的position为absolute，使其不按文档流排版，并设置其包裹整个布局 -->
    <!-- 设置opactity为0，使input变透明 -->
    <!-- 只接受jpg，gif和png格式 -->
    <input id="upload-input"  type="file" accept="image/gif, image/jpg, image/png" />
    <!-- 自定义按钮效果 -->
        <div id="upload" ></div>
</div>
<form action="/addBook" enctype="multipart/form-data" style="width: 100%;" target="target">
    <textarea name="name" id="name" maxlength="80" placeholder="请输入书名(必填)"></textarea>
    <textarea name="brief" id="brief" maxlength="250" placeholder="请输入简介"></textarea>
    <input type="button" value="创建" id="submit">
</form>
<!-- 底部导航栏 -->
<div class="fill"></div>
<div class="nav-bottom">
  <div class="find" id="find"></div>
  <div class="bookshelf" id="bookshelf"></div>
  <div class="word" id="word"></div>
  <div class="my" id="my"></div>
</div>
<!-- 底部导航栏结束 -->
</body>
<script src="js/nav-bottom.js"></script>
<script src="js/creatbook.js"></script>
</html>